<template>
    <q-btn dense flat stretch round :icon="themeSwitcherIcon" @click="changeTheme" />
</template>

<script setup lang='ts'>
import { useQuasar } from 'quasar';
import { computed, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import { useSiteSettings } from 'src/stores/site_setting'
import { storeToRefs } from 'pinia';

const $q = useQuasar()
const { t } = useI18n()

const siteSettings = useSiteSettings()
const siteSettingsRef = storeToRefs(siteSettings)

const themeSwitcherIcon = computed(() => {
    return siteSettingsRef.dark.value ? 'light_mode' : 'dark_mode'
})

const changeTheme = () => {
    siteSettings.changeTheme()
}

watch(siteSettingsRef.dark, (newValue) => {
    $q.notify({
        progress : true,
        message  : t('theme.set_success', { theme: newValue ? 'dark' : 'light' }),
        icon     : 'check_circle_outline',
        position : 'bottom-right',
        type     : 'positive',
        multiLine: false,
        timeout  : 800
    })
})
</script>
